<template>
  <van-nav-bar
    title="忘记密码"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />

  <div style="text-align: center">
    <van-icon class="icon" name="manager-o" size="24px" />
  </div>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px 0">
      <van-button
        round
        block
        @click="editFn"
        type="primary"
        native-type="submit"
      >
        提交
      </van-button>
    </div>
  </van-form>
</template>
<script setup>
import { ref } from "vue";
import axios from "axios";
import { showToast } from "vant";
import { edit } from "@/api/user.js";

const username = ref("");
const password = ref("");

function editFn() {
  console.log(localStorage.getItem("token"));
  edit(
    {
      username: username.value,
      password: password.value,
    },
    {
      "uni-id-token": localStorage.getItem("token"),
    }
  ).then((res) => {
    if (res.data.code == 0) {
      showToast({
        message: res.data.msg,
        icon: "success",
      });
      console.log(res);
    } else {
      showToast({
        message: res.data.msg,
        icon: "cross",
      });
      console.log(res);
    }
  });
}
</script>
<style>
.icon {
  padding: 40px;
  background-color: #dddddd;
  border-radius: 50%;
  margin-top: 20px;
  margin-bottom: 50px;
}
.log-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.log-top div:nth-child(2) {
  margin-left: 30px;
}
.van-cell-group--inset {
  margin: 0;
}
</style>
